<template>
  <a-modal
    v-model:open="visible"
    :mask-closable="false"
    width="75%"
    :title="`${props.selectorMode ? '选择' : ''}零售品`"
    :style="{ top: '20px' }"
    destroy-on-close
  >
    <div style="background: #ececec">
      <retail-product-info
        ref="retailProductInfoGrid"
        :shop-id="props.shopId"
        :selector-mode="props.selectorMode"
      />
    </div>
    <template #footer>
      <div class="form-modal-footer">
        <a-space v-if="props.selectorMode">
          <a-button type="primary" html-type="submit" @click="onConfirm">确认</a-button>
          <a-button @click="closeDialog">取消</a-button>
        </a-space>
      </div>
    </template>
  </a-modal>
</template>

<script setup>
  import { getCurrentInstance, ref } from 'vue';
  import RetailProductInfo from '@/views/base-data/product/info/retail.vue';

  // this对象
  const instance = getCurrentInstance();

  const emit = defineEmits(['confirm', 'close']);

  const visible = ref(false);

  const retailProductInfoGrid = ref();

  const props = defineProps({
    selectorMode: {
      type: Boolean,
      default: true,
    },
    shopId: {
      type: String,
      default: '',
    },
  });

  // 打开弹窗
  const openDialog = () => {
    visible.value = true;
  };

  // 关闭对话框
  const closeDialog = () => {
    visible.value = false;
    emit('close');
  };

  // 确认选择
  const onConfirm = () => {
    const selectedRows = retailProductInfoGrid.value.getSelectedRows();
    emit('confirm', selectedRows);
    closeDialog();
  };

  // 组件实例对象
  const _This = () => {
    return instance.appContext.config.globalProperties;
  };

  defineExpose({
    openDialog,
  });
</script>

<style scoped></style>
